<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="title"
    width="30%"
    @close="close"
    center
  >
    <div class="flex justify-between mb-4">
      <div class="text-[18px] text-[#333]">{{ info.label }}</div>
      <p class="text-[18px] text-[#333]">
        {{ info.amount }} {{ info.currency }}
      </p>
    </div>
    <el-form :model="state.verticalForm" :rules="rules">
      <el-form-item prop="trade_pwd">
        <el-input
          v-model="state.verticalForm.trade_pwd"
          :placeholder="$t('VA-请输入支付密码')"
          clearable
          type="password"
          show-password
          size="large"
        />
      </el-form-item>
      <!-- <el-form-item prop="google_code" v-if="isVAlid">
        <el-input
          v-model="state.verticalForm.google_code"
          :placeholder="$t('请输入谷歌验证码')"
          clearable
        />
      </el-form-item> -->
      <el-form-item>
        <div class="flex items-center justify-center w-full">
          <el-button type="primary" @click="confirm" class="w-40">{{
            $t("确认")
          }}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import { useI18n } from "vue-i18n";
// import { useMerchantStore } from "@/store/modules/merchant";
const { t } = useI18n();

// const useMerchant = useMerchantStore();
// const isVAlid = ref(false);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  info: {
    type: Object,
    default: () => {},
  },
});

const state = reactive({
  verticalForm: {
    trade_pwd: "",
    // google_code: "",
  },
});

const emits = defineEmits(["submitForm", "close"]);

const close = () => {
  emits("close");
};

const confirm = () => {
  let query = { ...state.verticalForm };
  if (!query.google_code) {
    delete query.google_code;
  }
  emits("submitForm", query);
};

// 校验
const rules = computed(() => {
  return {
    trade_password: [
      { required: true, message: t("请输入支付密码"), trigger: "blur" },
    ],
    // google_code: [
    //   { required: true, message: t("请输入谷歌验证码"), trigger: "blur" },
    // ],
  };
});
onMounted(() => {
  //   判断是否有谷歌验证
  //   if (useMerchant.merchantInfo.va > 0) {
  //     isVAlid.value = true;
  //   } else {
  //     isVAlid.value = false;
  //   }
});
</script>
